<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title> 哆啦A梦</title>
    <link rel="stylesheet" href="./style.css">
    <style>
        .doraemon *,.doraemon *::before,.doraemon *::after{
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            list-style: none;
        }
        body {background: #D4ECF9}
        .doraemon{
            position: relative;
            animation: volar 1s linear 2s infinite alternate;
            margin-top:-50px;
        }
        #demo2 {
            display: none;
        }
        #demo {
            padding: 20px;
            position: fixed;
            height: 40vh;
            top: 0;
            left: 0px;
            width: 100%;
            border: 1px solid black;
            overflow-y: auto;
        }

        #demo::-webkit-scrollbar {
            display: none;
        }

        #html {
            position: fixed;
            bottom: 30px;
            left: 0;
            width: 100%;
            height: 60vh;
        }

        #buttons {
            position: fixed;
            right: 0;
            top: 0;
            z-index: 10;
            display: flex;
            flex-direction: column;
            margin-top: 10px;
            margin-right: 10px;
        }

        #buttons>button {
            margin-bottom: 10px;
            padding: 4px 8px;
            border: none;
            outline: none;
            background-color: #ff410f;
            color: #ffffff;
            border-radius: 4px;
        }
        @media screen and (max-width: 500px) {
            #html {
                height: 80vh;
            }
             #demo {
                 height: 20vh;
             }
        }
    </style>
</head>
<body>
    <div id="demo">

    </div>
     <style id="demo2">
        
    </style>
     <div id="buttons">
        <button id="btnPause">暂停</button>
        <button id="btnPlay">播放</button>
        <button id="btnSlow">慢速</button>
        <button id="btnNormal"> 中速</button>
        <button id="btnFast">快速</button>
    </div>
    <div id="html">
        <div class="doraemon">
            <div class="cajaovalo">
            <div class="ovalo"></div>
                <div class="semi-circulo">
                <div class="palo"></div>
            </div>
            </div>
            <div class="head">
                <div class="circle">
                    <div class="eye left">
                        <div class="eyeball left"></div>
                    </div>
                    <div class="eye right">
                        <div class="eyeball right"></div>
                    </div>
                    <div class="nose">
                        <div class="naris"></div>
                    </div>
                    <div class="beard">
                        <ul class="bigotes">
                            <li><div class="b1"></div></li>
                            <li><div class="b2"></div></li>
                            <li><div class="b3"></div></li>
                        </ul>
                        <ul class="bigotes2">
                            <li><div class="b1_"></div></li>
                            <li><div class="b2_"></div></li>
                            <li><div class="b3_"></div></li>
                        </ul>
                    </div>
                    <div class="mouth">
                        <div class="reacangle"></div>
                        <div class="lip">
                            <ul class="down"></ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="hand left" ></div>
            <div class="hand right" ></div>
            <div class="arm left"></div>
            <div class="arm right"></div>
            <div class="body">
                <div class="bufanda"></div>
                <div class="campana">
                    <div class="bolanegra"></div>
                    <div class="palonegro"></div>
                </div>
                <div class="huevo">
                    <div class="ovalocesta">
                    <div class="cesta"></div>
                    </div>
                </div>
            </div>
            <div class="foot left"></div>
            <div class="foot right"></div>
        </div>
    </div>
</body> 
<script src="./main.js"></script>
</body>
</html>